<script setup>
import { computed, onMounted, ref } from 'vue'
import { getSiteListAPI, getSiteListDistanceAPI } from '@/api/site'
import ListCard from './components/ListCard.vue'
const IMAGE_URL = computed(() => import.meta.env.VITE_IMAGE_URL)
const dataList = ref([])

const getList = async (params) => {
  try {
    const res = await getSiteListDistanceAPI(params)
    dataList.value = res.data || []
  } catch (error) {
    const { code, msg } = error
    if (code != '401') {
      uni.showToast({ title: msg, icon: 'none' })
    }
  }
}

// 跳转详情
const toDetail = (item) => {
  uni.navigateTo({
    url: `/pages/cooperate/venue-detail?id=${item.id}`,
  })
}

onMounted(async () => {
  const { latitude, longitude } = await uni.getLocation()
  getList({ lat: latitude, lng: longitude })
})
</script>

<template>
  <view class="list">
    <view v-for="(item, index) in dataList" :key="index">
      <ListCard :imgUrl="`${IMAGE_URL}${item.siteImg}`" @tap="toDetail(item)">
        <template #venue>
          <view class="right">
            <view class="name limit">{{ item.siteName }}</view>
            <view class="desc limit">{{ item.siteDescrip }}</view>
            <view class="com limit w240">{{ item.siteAddress }}</view>
            <view class="btns">
              <view class="label">在线预约</view>
              <view class="btn">预约</view>
            </view>
            <view class="address">
              <image
                src="@/static/images/active/address2.png"
                mode="aspectFill"
              />
              <view class="distant">{{ item.distance }}km</view>
            </view>
          </view>
        </template>
      </ListCard>
    </view>
    <no-data v-if="dataList.length == 0" />
  </view>
</template>

<style lang="scss" scoped>
.list {
  background: #ffffff;
  padding: 20rpx 48rpx;
  .right {
    position: relative;
    flex: 1;
    color: #333333;
    font-weight: 500;
    .name {
      font-size: 28rpx;
      margin-bottom: 16rpx;
    }
    .desc {
      font-size: 24rpx;
      margin-bottom: 16rpx;
    }
    .com {
      color: #666666;
      font-size: 24rpx;
      font-weight: 400;
      margin-bottom: 8rpx;
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .label {
        padding: 4rpx 8rpx;
        border-radius: 4rpx;
        background: #ffede3;
        color: #ea5506;
        font-size: 20rpx;
        font-weight: 400;
      }
      .btn {
        padding: 6rpx 24rpx;
        border-radius: 40px;
        background: #ea5506;
        color: #ffffff;
        font-size: 24rpx;
        font-weight: 400;
      }
    }

    .address {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      image {
        width: 36rpx;
        height: 36rpx;
      }
      .distant {
        color: #999999;
        font-size: 24rpx;
        font-weight: 400;
      }
    }
  }
  ::v-deep {
    .list-card {
      margin-bottom: 24rpx;
    }
  }
}

.limit {
  width: 190rpx;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis;
}

.w240 {
  width: 240rpx !important;
}
</style>
